/* 
全选
    -点击按钮后,把多个多选框都变为选中状态
取消
    -点击按钮后,把多个多选框都变为取消选中状态
反选
    -点击按钮后,把全部选中状态的设置为取消选择
提交
让小的checkbox和大的checkbox同步
    -全选的checkbox发生变化后,全部checkbox同步,取消或者是选择
*/
/* 
    onclick单击后
    change 发生变化后
*/
/* 
    首先获取全部元素
*/
// 优化条件,把全选,取消,反选,对小checkbox带来影响也反馈到大的去
const hobbies = document.getElementsByName("hobby")
const allBtn = document.getElementById("All")
const checkedAll = document.getElementById("checkbox-All")
const delAll = document.getElementById("Del")
const reverseAll = document.getElementById("reverse")
const sendAll = document.getElementById("send")

/* 
    实现全选按钮
        在我All按钮被点击的时候,运行函数,让每个小的checkbox的check属性都为true
        然后把大的checkbox的check属性设置为ture
*/
allBtn.addEventListener("click", function () {
    for (let i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = true

    }
    checkedAll.checked = true
})
/* 
    实现全选取消按钮
        在我Del按钮被点击的时候,运行函数,让每个小的checkbox的check属性都为false
        然后把大的checkbox的check属性设置为false
*/
delAll.addEventListener("click", function () {
    for (let i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = false
    }
    checkedAll.checked = false
})
/* 
    实现反选按钮
        在我reverse按钮被点击的时候,运行函数,让每个小的checkbox的check属性都为true都变为!true,false变为!false
        然后检查每个小checkbox被勾上的数量,对比全部+起来和被勾上的数量,如果相同,就把大的checkbox值为true,反而反之让大的checkbox值为false
*/
reverseAll.onclick = function () {
    for (let i = 0; i < hobbies.length; i++) {
        hobbies[i].checked = !hobbies[i].checked

    }
    const checkbox = document.querySelectorAll("[name=hobby]:checked")
    if (checkbox.length === hobbies.length) {
        checkedAll.checked = true
    } else {
        checkedAll.checked = false
    }


}
/* 
    实现提交按钮
        在我ALL按钮被点击的时候,运行函数
            检查每个hobby按钮的checked属性是否为true,是的都输出当前的hobby的value属性
        
*/
sendAll.addEventListener("click", function () {
    for (let i = 0; i < hobbies.length; i++) {
        if (hobbies[i].checked == true) {
            alert(hobbies[i].value)

        }
        // hobbies[i].checked && alert(hobbies[i].value)  
        //   效果一样
    }
})
/* 
    实现大checkbox的全选按钮
        比对大的checkbox的checked的属性是否为true,是就让所有的小checkbox的checked属性为true反而反之
*/
checkedAll.addEventListener("change", function () {
    if (checkedAll.checked) {
        for (let i = 0; i < hobbies.length; i++) {
            hobbies[i].checked = true

        }
    }
    else {
        for (let i = 0; i < hobbies.length; i++) {
            hobbies[i].checked = false
        }
    }

    /*
     这样也可以实现
     // 在事件的响应中,响应函数绑定给谁,this就是是谁
     for (let i = 0; i < hobbies.length; i++) {
         hobbies[i].checked = checkedAll.checked
         
     } */
})
/* 也要让小的checkbox和大的同步,小的有一个没选,大的也要发生变化
    完善规则以防出现大的checkbox全选点了,小的checkbox不同步
    遍历每个小checkbox当他们发生变化的时候
        声明checkbox函数,赋值为name=hobby并且处于checked=ture状态的input元素
        对比全部小的checkbox元素总量和已经被勾上的总量
        实现将大小的checkbox的全选同步功能
 */
for (let i = 0; i < hobbies.length; i++) {
    hobbies[i].addEventListener("change", function () {
        const checkbox = document.querySelectorAll("[name=hobby]:checked")
        if (checkbox.length === hobbies.length) {
            checkedAll.checked = true
        } else {
            checkedAll.checked = false
        }
    })

}


